<!--
 * @Author: sjt
 * @Date: 2024-05-14 16:25:54
 * @LastEditors: sjt
 * @LastEditTime: 2024-10-09 10:23:58
 * @Description: file content
-->
<template>
  <div class="wrap">
    <div class="wrap-left">
      <div class="item">
        <leftTitle name="业务订单概况" />
        <ul class="item-content">
          <li v-for="item in orderList">
            <div class="title">{{ item.name }}</div>
            <div class="text1">
              <span class="num">{{ item.orderQuantity }}</span>
              <span class="unit">单</span>
            </div>
            <div class="text2">
              <span class="num">{{ item.piecesNum }}</span>
              <span class="unit">件</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="item">
        <leftTitle name="生产订单概况" />
        <div style="height: 25%;width: 100%;">
          <barChart ref="barCharRef" />
        </div>
        <ul class="list2">
          <li v-for="(item, index) in list2">
            <div class="title">{{ item.name }}</div>
            <div class="text">
              <span class="num">
                {{ item.orderQuantity }}
                <span style="  font-size: 0.6vh;margin-left: 5px;margin-top: 8px;">单</span>
              </span>
              <span class="num">
                {{ item.piecesNum }}
                <span style="  font-size: 0.6vh; margin-left:5px; margin-top: 8px;">件</span>
              </span>
            </div>
          </li>
        </ul>
      </div>
      <div class="item">
        <leftTitle name="生产逾期分析" />
        <div class="item-3-chart">
          <coneChart ref="coneChartRef" />
        </div>
      </div>
      <div class="item">
        <leftTitle name="成品库存&库龄分析" />
        <ul class="list4">
          <li v-for="item in list4">
            <div class="info">
              <img :src="item.icon" alt="">
              <span>{{ item.name }}</span>
            </div>
            <span class="num">{{ item.value }}</span>
          </li>
        </ul>
        <div class="chart4">
          <div class="title"></div>
          <cir3dChart ref="cir3dChartRef" />
        </div>
      </div>

    </div>
    <div class="wrap-center">
      <div>
        <div class="title">机器人状态&任务分析</div>
        <div class="chart">
          <ul class="list1">
            <li v-for="item in center1List">
              <div class="name">{{ item.name }}</div>
              <div class="num">{{ item.value }}</div>
            </li>
          </ul>
          <ul class="list2">
            <li v-for="(item, index) in center2List">
              <div class="tip">
                <img src="@/assets/images/page2/centerlist2-icon.png" alt="">
                <span>{{ item.name }}</span>
              </div>
              <div class="info">
                <span
                  :class="{ 'num': true, 'color1': index === 1, 'color2': index === 2, 'color2': index === 2, 'color3': index === 3, 'color4': index === 4, 'color5': index === 5, }">{{
                    item.value }}</span>
                <span>台</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <div class="title">机器人利用率</div>
        <div class="chart">
          <rightBarsChart ref="centerChartRef" />
          <div class="pstips">
            <span>平均利用率</span>
            <span class="num">88.95</span>%
          </div>
        </div>
      </div>
      <div>
        <div class="title">机器人报警<span class="warning-num">0</span><span
            style="font-size: 0.6vh;text-indent: 5px;margin-top: 3px">台</span></div>
        <div class="chart warnchart">
          <div class="last-left"></div>
          <div class="last-right">
            <div class="top">
              <p>机器型号</p>
              <p>错误代码：45642</p>
            </div>
            <div class="center">
              <p>问题原因：</p>
              <p class="info">网络中断或网络不稳定，导致发送机器人指令失败</p>
            </div>
            <div class="bottom">
              <p>解决方案：</p>
              <p class="info">检查机器人网络是否连接正常，及检查网络性能</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrap-right">
      <div class="top">
        <leftTitle name="人员概况" />
        <ul class="list5">
          <li v-for="item in list5">
            <div class="info">
              <img :src="item.icon" alt="">
              <span>{{ item.name }}</span>
            </div>
            <span class="num">{{ item.value }}</span>
          </li>
        </ul>
        <bar2Chart ref="bar2ChartRef" />
        <div class="chart5">
          <div class="title">年龄分布
            <div class="tips">
              <span>平均年龄</span>
              <span class="num">{{ nlTotals }}</span>
              <span>岁</span>
            </div>

          </div>
          <div class="chart-box">
            <bottomBarChart ref="chart5Ref" />
          </div>

        </div>
        <div class="chart6">
          <div class="list">
            <div class="title">员工最高收入排行</div>
            <dv-scroll-board :config="scrollConfig" class="scroll-list" />
          </div>
          <div class="list">
            <div class="title">员工最低收入排行</div>
            <dv-scroll-board :config="scrollConfig1" class="scroll-list" />
          </div>
        </div>
      </div>
      <div class="bottom">
        <leftTitle name="品控分析" />
        <div style="height: 17%;width: 100%;">
          <barChart ref="pkCharRef" />
        </div>
        <div class="chart7">
          <div class="list">
            <div class="title">常出问题人员TOP10</div>
            <dv-scroll-board :config="scrollConfig3" class="scroll-list" />
          </div>
          <div class="list">
            <div class="title">常出问题TOP10</div>
            <dv-scroll-board :config="scrollConfig4" class="scroll-list" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import leftTitle from '@/components/leftTitle.vue'
import serveodel from '@/api'
import { useRouter } from 'vue-router'
import barChart from '@/components/barChart.vue'
import bar2Chart from '@/components/bar2Chart.vue'
import coneChart from '@/components/coneChart.vue'
import cir3dChart from '@/components/cir3dChart.vue'
import bottomBarChart from '@/components/bottomBarChart.vue'
import rightBarsChart from '@/components/rightBarsChart.vue'

import list4Icon1 from '@/assets/images/page2/list4-icon1.png'
import list4Icon2 from '@/assets/images/page2/list4-icon2.png'
import list5Icon1 from '@/assets/images/page2/list5-icon.png'

import number1Icon from '@/assets/images/page2/numer1.png'
import number2Icon from '@/assets/images/page2/numer2.png'
import number3Icon from '@/assets/images/page2/numer3.png'
import number4Icon from '@/assets/images/page2/numer4.png'


let restData = ref()
let orderList = ref([])
let barCharRef = ref()
let coneChartRef = ref()
let cir3dChartRef = ref()
let bar2ChartRef = ref()
let chart5Ref = ref()
let pkCharRef = ref()
let centerChartRef = ref()
let list2 = ref([])
let list4 = ref([])
let list5 = ref([])
let nlTotals = ref(0)
let topList = ref([])
let lowList = ref([])
let center1List = ref([{ name: '总任务数', value: 10 }, { name: '已完成任务', value: 10 }])
let center2List = ref([
  {
    name: '总数',
    value: 7
  },
  {
    name: '运送',
    value: 3
  },
  {
    name: '空闲',
    value: 0
  },
  {
    name: '离线',
    value: 3
  },
  {
    name: '故障',
    value: 1
  },
  {
    name: '充电',
    value: 0
  }
])
let scrollConfig = ref({
  headerBGC: 'rgba(0, 45, 110, 0)',
  oddRowBGC: 'rgba(2, 136, 250, 0.0)',
  evenRowBGC: 'rgba(0,0,0,0)',
  rowNum: 5,
  waitTime: 3000,
  align: ['center', 'left', 'left', 'left'],
  data: []
})
let scrollConfig1 = ref({
  headerBGC: 'rgba(0, 45, 110, 0)',
  oddRowBGC: 'rgba(2, 136, 250, 0.0)',
  evenRowBGC: 'rgba(0,0,0,0)',
  rowNum: 5,
  waitTime: 3000,
  align: ['center', 'left', 'left', 'center'],
  data: []
})
let scrollConfig3 = ref({
  headerBGC: 'rgba(0, 45, 110, 0)',
  oddRowBGC: 'rgba(2, 136, 250, 0.0)',
  evenRowBGC: 'rgba(0,0,0,0)',
  rowNum: 5,
  waitTime: 3500,
  align: ['center', 'left', 'left', 'center'],
  data: []
})
let scrollConfig4 = ref({
  headerBGC: 'rgba(0, 45, 110, 0)',
  oddRowBGC: 'rgba(2, 136, 250, 0.0)',
  evenRowBGC: 'rgba(0,0,0,0)',
  rowNum: 5,
  waitTime: 5000,
  align: ['center'],
  data: []
})
const initData = async () => {
  const { data } = await serveodel.getData({
    boardId: '17',
    deptId: '1789206421226201090'
  })
  let result = {}
  data.map(item => {
    result[item.interfaceName] = JSON.parse(item.bulletinData)
  })
  console.log(result)
  restData.value = result
  // 业务订单概况
  let orderData = result['业务订单概况'].data
  orderList.value = [{
    name: '本月接单数',
    orderQuantity: orderData.thisMonthOrder.orderQuantity,
    piecesNum: orderData.thisMonthOrder.piecesNum
  }, {
    name: '累计待交付',
    orderQuantity: orderData.cumulativeDelivery.orderQuantity,
    piecesNum: orderData.cumulativeDelivery.piecesNum
  }, {
    name: '本月发货',
    orderQuantity: orderData.thisMonthGoods.orderQuantity,
    piecesNum: orderData.thisMonthGoods.piecesNum
  }]
  // 生产订单概况
  barCharRef.value.initChart([{ name: '生产交期达成率', value: result['生产订单概况'].data.completeRate }])
  list2.value = [
    {
      name: '本月排产产量',
      orderQuantity: result['生产订单概况'].data.thisMonthOutput.orderQuantity,
      piecesNum: result['生产订单概况'].data.thisMonthOutput.piecesNum,
    },
    {
      name: '本月交期完成产量',
      orderQuantity: result['生产订单概况'].data.thisMonthcompleteNum.orderQuantity,
      piecesNum: result['生产订单概况'].data.thisMonthcompleteNum.piecesNum,
    }
  ]
  // 生产逾期分析
  coneChartRef.value.initChart(result['生产逾期分析'].data.info, result['生产逾期分析'].data.totalNum)
  //成品库存&库龄分析
  list4.value = [
    {
      name: '库存总件数',
      icon: list4Icon1,
      value: result['成品库存&库龄分析'].data.inventoryTotalNum,
    },
    {
      name: '成品仓空库位',
      icon: list4Icon2,
      value: result['成品库存&库龄分析'].data.warehouseType,
    }
  ]
  cir3dChartRef.value.initChart(result['成品库存&库龄分析'].data.inventoryHistiry.map(item => {
    return {
      name: item.commonString,
      value: item.commonValue
    }
  }), result['成品库存&库龄分析'].data.inventoryTotalNum)

  // 人员概况

  list5.value = [{
    name: '今日出勤',
    icon: list5Icon1,
    value: result['人员概况'].data.onlineNum,
  },]
  bar2ChartRef.value.initChart([
    { name: '在线人数', value: result['人员概况'].data.onlineNum },
    { name: '离线人数', value: result['人员概况'].data.offlineNum }
  ])
  //年龄分布
  nlTotals.value = result['年龄分布'].data.avgAge
  chart5Ref.value.initChart(result['年龄分布'].data.info)
  // 员工最高最低收入排行
  scrollConfig.value.data = fomatScrollList(result['员工最高最低收入排行'].data.topIncome)
  scrollConfig1.value.data = fomatScrollList1(result['员工最高最低收入排行'].data.botIncom)
  //品控分析
  pkCharRef.value.initChart([{ name: '不良率', value: result['品控分析'].data.value }])
  // 常出问题人员TOP10
  scrollConfig3.value.data = fomatScrollList1(result['常出问题人员TOP10'].data.defectPersonInfo)
  scrollConfig4.value.data = fomatScrollList2(result['常出问题人员TOP10'].data.defectInfo)
  // 机器人利用率
  centerChartRef.value.initChart([
    {
      name: 'CD14-1',
      value: 77
    },
    {
      name: 'CD15-1',
      value: 85
    },
    {
      name: 'CD15-2',
      value: 87
    },
    {
      name: 'CD16-1',
      value: 67
    },
    {
      name: 'HR-1',
      value: 72
    }
  ])
}
const fomatScrollList = (list) => {
  let arr = list.map((item, index) => {

    let scroll1 = `<span style="display: inline-block;padding-left: 12px; line-height: 32px; background: url(${number1Icon}); background-size: 100% 100%; width: 40px;  height: 32px;  font-weight: 400;font-size: 12px;">${index + 1
      }</span>`
    let scroll2 = `<span style="display: inline-block;padding-left: 12px; line-height: 32px; background: url(${number2Icon}); background-size: 100% 100%; width: 40px;  height: 32px;  font-weight: 400;font-size: 12px;">${index + 1
      }</span>`
    let scroll3 = `<span style="display: inline-block;padding-left: 12px; line-height: 32px; background: url(${number3Icon}); background-size: 100% 100%; width: 40px;  height: 32px;  font-weight: 400;font-size: 12px;">${index + 1
      }</span>`
    let scrollother = `<span style="display: inline-block;padding-left: 15px; line-height: 32px; background: url(${number4Icon}); background-size: 100% 100%; width: 40px;  height: 32px;  font-weight: 400;font-size: 12px;">${index + 1
      }</span>`
    let header =
      index === 0
        ? scroll1
        : index === 1
          ? scroll2
          : index === 2
            ? scroll3
            : scrollother
    return [header, item.name, item.deptName]
  })
  return arr
}
const fomatScrollList1 = (list) => {
  let arr = list.map((item, index) => {
    let scroll1 = `<span style="background:rgba(230, 59, 79, 0.5); padding: 4px 8px; font-weight: 400;
font-size: 12px;">${index + 1}</span>`
    let scroll2 = `<span style="background:rgba(243, 198, 116, 0.5); padding: 4px 8px; font-weight: 400;font-size: 12px;">${index + 1
      }</span>`
    let scroll3 = `<span style="background:rgba(54, 209, 233,0.5); padding: 4px 8px; font-weight: 400;font-size: 12px;">${index + 1
      }</span>`
    let scrollother = `<span style="background:rgba(24, 153, 230, 0.5); padding: 4px 8px; font-weight: 400;font-size: 12px;">${index + 1
      }</span>`
    let header =
      index === 0
        ? scroll1
        : index === 1
          ? scroll2
          : index === 2
            ? scroll3
            : scrollother
    return [header, item.name, item.deptName]
  })
  return arr
}
const fomatScrollList2 = (list) => {
  let arr = list.map((item, index) => {
    let scroll1 = `<span style="background:rgba(230, 59, 79, 0.5); padding: 4px 8px; font-weight: 400;
font-size: 12px;">${index + 1}</span>`
    let scroll2 = `<span style="background:rgba(243, 198, 116, 0.5); padding: 4px 8px; font-weight: 400;font-size: 12px;">${index + 1
      }</span>`
    let scroll3 = `<span style="background:rgba(54, 209, 233,0.5); padding: 4px 8px; font-weight: 400;font-size: 12px;">${index + 1
      }</span>`
    let scrollother = `<span style="background:rgba(24, 153, 230, 0.5); padding: 4px 8px; font-weight: 400;font-size: 12px;">${index + 1
      }</span>`
    let header =
      index === 0
        ? scroll1
        : index === 1
          ? scroll2
          : index === 2
            ? scroll3
            : scrollother
    return [header, item.defectName]
  })
  return arr
}
onMounted(() => {
  initData()
})

</script>

<style lang="scss" scoped>
.wrap {
  overflow: hidden;
  display: flex;
  background: transparent;
  justify-content: center;
  align-items: flex-end;
  position: relative;

  &-center {
    height: 24%;
    width: 56%;
    display: flex;
    padding: 0 32px;
    opacity: 1;
    // animation: toShow 4s ease-in-out 2s forwards;
  }

  &-left {
    width: 22%;
    height: 100%;
    position: absolute;
    left: -22%;
    top: 0;
    animation: toLeft 2s ease-in-out forwards;
  }

  &-right {
    width: 22%;
    height: 100%;
    position: absolute;
    right: -22%;
    top: 0;
    animation: toRight 2s ease-in-out forwards;
  }
}

.wrap-left {
  display: flex;
  flex-direction: column;

  .item {
    height: 25%;
    width: 100%;
  }

  .item-content {
    height: calc(100% - 45px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    li {
      height: 90%;
      width: 32%;
      background: url('@/assets/images/page2/order-bg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;

      .title {
        font-size: 0.7vh;
        position: absolute;
        top: 14%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .text1 {
        justify-content: center;
        width: 100%;
        position: absolute;
        top: 41%;
        display: flex;
        align-items: center;
      }

      .text2 {
        justify-content: center;
        width: 100%;
        display: flex;
        align-items: center;
        position: absolute;
        top: 68%;
        align-items: center;
      }

      .num {
        font-family: AgencyFB-Bold;
        font-size: 1.2vh;
        text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
          0 0 14px rgba(2, 139, 255, 0.56);
      }

      .unit {
        font-size: 0.6vh;
        margin-left: 10px;
        margin-top: 8px;
      }
    }
  }

  .list2 {
    height: calc(60% - 42px);
    margin-top: 4%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    li {
      width: 48%;
      height: 100%;
      background: url('@/assets/images/page2/list2-item-bg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;

      .title {
        width: 100%;
        position: absolute;
        top: 6%;
        display: flex;
        font-size: 0.8vh;
        text-indent: 26px;
      }

      .text {
        width: 100%;
        position: absolute;
        bottom: 12%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .num {
          font-family: AgencyFB-Bold;
          font-size: 1.2vh;
          text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
            0 0 14px rgba(2, 139, 255, 0.56);
        }
      }
    }
  }

  .item-3-chart {
    height: calc(100% - 50px);
    width: 100%;
  }

  .list4 {
    margin-top: 5px;
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    li {
      width: 46%;
      height: 100%;
      background: url('@/assets/images/page2/list4-bg.png')no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      .info {
        display: flex;
        align-items: center;
        font-size: 0.6vh;

        img {
          width: 24%;
          height: auto;
          margin-right: 5px;
        }
      }

      .num {
        font-family: AgencyFB-Bold;
        font-size: 1.1vh;
        text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
          0 0 14px rgba(2, 139, 255, 0.56);
      }
    }
  }

  .chart4 {
    height: calc(100% - 90px);
    width: 100%;

  }
}

.wrap-right {
  .top {
    height: 68%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .list5 {
      margin-top: 5px;
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        width: 46%;
        height: 100%;
        background: url('@/assets/images/page2/list4-bg.png')no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;

        .info {
          display: flex;
          align-items: center;
          font-size: 0.8vh;

          img {
            width: 24%;
            height: auto;
            margin-right: 5px;
          }
        }

        .num {
          font-family: AgencyFB-Bold;
          font-size: 1.1vh;
          text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
            0 0 14px rgba(2, 139, 255, 0.56);
        }
      }
    }

    .chart5 {
      height: 30%;
      width: 100%;

      .title {
        height: 28px;
        width: 100%;
        background: url('@/assets/images/page1/list-title-bg.png') no-repeat;
        background-size: 100% 80%;
        display: flex;
        align-items: center;
        text-indent: 34px;
        font-size: 0.9vh;
        padding-bottom: 15px;
        font-weight: 400;
        position: relative;

        .tips {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          position: absolute;
          align-items: center;
          right: 0;
          top: -10px;
          font-size: 0.7vh;
          text-indent: 0;

          .num {
            margin: 0 4px 4px 14px;
            font-family: AgencyFB-Bold;
            font-size: 1.1vh;
            text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
              0 0 14px rgba(2, 139, 255, 0.56);
          }
        }
      }

      .chart-box {
        width: 100%;
        height: calc(100% - 36px);
      }
    }

    .chart6 {
      height: calc(70% - 200px);
      padding-top: 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .list {
        height: 100%;
        width: 50%;

        .title {
          height: 24px;
          width: 100%;
          background: url('@/assets/images/page2/pubtitle1-bg.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          text-indent: 28px;
          font-size: 0.8vh;
          padding-bottom: 5px;
          font-weight: 400;
        }
      }

      .scroll-list {
        margin: 5px 0;
        height: calc(100% - 35px);
        width: 100%;
      }
    }

  }

  .bottom {
    height: 32%;
    width: 100%;

    .chart7 {
      height: calc(83% - 45px);
      padding-top: 15px;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .list {
        height: 100%;
        width: 50%;

        .title {
          height: 24px;
          width: 100%;
          background: url('@/assets/images/page2/pubtitle1-bg.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          text-indent: 28px;
          font-size: 0.8vh;
          padding-bottom: 5px;
          font-weight: 400;
        }
      }

      .scroll-list {
        margin: 5px 0;
        height: calc(100% - 35px);
        width: 100%;
      }
    }
  }
}

.wrap-center {
  justify-content: space-between;

  >div:nth-child(1) {
    height: 100%;
    width: 31%
  }

  >div:nth-child(2) {
    height: 100%;
    width: 33%
  }

  >div:nth-child(3) {
    height: 100%;
    width: 31%
  }

  .title {
    height: 24px;
    width: 100%;
    background: url('@/assets/images/page1/list-title-bg.png') no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    text-indent: 32px;
    font-size: 0.85vh;
    padding-bottom: 15px;
    font-weight: 400;
    position: relative;

    .tips {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      position: absolute;
      align-items: center;
      right: 0;
      top: -10px;
      font-size: 0.8vh;
      text-indent: 0;

      .num {
        margin: 0 4px 4px 14px;
        font-family: AgencyFB-Bold;
        font-size: 1.1vh;
        text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
          0 0 14px rgba(2, 139, 255, 0.56);
      }
    }
  }

  .chart {
    height: calc(100% - 26px);
    width: 100%;
    padding-top: 10px;
    position: relative;
  }

  .list1 {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: space-around;

    li {
      width: 45%;
      height: 100%;
      background: url('@/assets/images/page2/centerlist1-item-bg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;

      .name {
        position: absolute;
        top: 12px;
        font-size: 0.7vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .num {
        position: absolute;
        bottom: 18px;
        width: 100%;
        display: flex;
        justify-content: center;
        font-family: AgencyFB-Bold;
        font-size: 1vh;
        text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
          0 0 14px rgba(2, 139, 255, 0.56);
      }
    }
  }

  .list2 {
    display: flex;
    height: 50%;
    width: 100%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;

    li {
      width: 32%;
      height: 50%;
      display: flex;
      justify-content: space-around;

      .tip {
        display: flex;
        align-items: center;
        color: #C7DFFC;
        font-size: 0.6vh;

        img {
          width: 24px;
          height: 24px;
        }
      }

      .info {
        display: flex;
        align-items: center;

        .num {
          margin: 0 4px 0px 4px;
          font-family: AgencyFB-Bold;
          font-size: 1vh;
          text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
            0 0 14px rgba(2, 139, 255, 0.56);
        }

        .color1 {
          text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
            0 0 14px rgba(2, 139, 255, 0.56);
        }

        .color2 {
          text-shadow: 0 0 14px rgba(10, 255, 2, 0.56),
            0 0 14px rgba(10, 255, 2, 0.56);
        }

        .color3 {
          color: rgba(49, 49, 49, 0.5);
          text-shadow: 0 0 14px rgba(28, 29, 28, 0.56),
            0 0 14px rgba(28, 29, 28, 0.56);
        }

        .color4 {
          text-shadow: 0 0 14px rgba(214, 21, 21, 0.56),
            0 0 14px rgba(214, 21, 21, 0.56);
        }

        .color5 {
          text-shadow: 0 0 14px rgba(221, 134, 12, 0.56),
            0 0 14px rgba(221, 134, 12, 0.56);
        }
      }
    }
  }

  .pstips {
    position: absolute;
    right: 0;
    top: -35px;
    color: #C7DFFC;
    font-size: 0.7vh;

    .num {
      margin: 0 4px 4px 14px;
      font-family: AgencyFB-Bold;
      font-size: 1vh;
      color: #fff;
      text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
        0 0 14px rgba(2, 139, 255, 0.56);
    }
  }

  .warning-num {
    text-indent: 16px;
    font-family: AgencyFB-Bold;
    font-size: 1vh;
    color: #fff;
    text-shadow: 0 0 14px rgba(245, 36, 25, 0.56),
      0 0 14px rgba(245, 36, 25, 0.56);
  }

  .warnchart {
    display: flex;
    padding-bottom: 15px;

    .last-left {
      width: 38%;
      height: 100%;
      background: url('@/assets/images/page2/warn-left-bg.png') no-repeat;
      background-size: 100% 100%;
    }

    .last-right {
      width: 62%;
      height: 100%;
      background: url('@/assets/images/page2/warn-right-bg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;

      .top {
        position: absolute;
        left: 20px;
        top: 5px;
        font-size: 0.6vh;
        color: #FFC9C9
      }

      .center {
        position: absolute;
        left: 20px;
        top: 28%;
        font-size: 0.6vh;
        color: #fff;
        font-weight: bold;
      }

      .bottom {
        position: absolute;
        left: 20px;
        top: 63%;
        font-size: 0.6vh;
        color: #fff;
        font-weight: bold;
      }

      .info {
        color: #C7DFFC;
        font-size: 0.5vh;
        font-weight: bold;
        width: 90%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

}

.scroll-list {
  width: 100%;

  :deep(.header-item) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 0.8vh;
    color: #0b90ff;
  }

  :deep(.ceil) {
    padding: 0 2px !important
  }

  :deep(.row-item .index) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 0.7vh;
    color: #ffffff;
    background-color: rgba(2, 139, 255, 0.5) !important;
  }

  :deep(.row-item .ceil):nth-child(2) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 0.6vh;
    color: #fff;
  }

  :deep(.row-item .ceil):nth-child(3) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 0.6vh;
    color: #c7dffc;
  }

  :deep(.row-item .ceil):nth-child(4) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 0.7vh;
    color: #c7dffc;
  }

  :deep(.row-item .ceil):nth-child(5) {
    font-family: DIN;
    font-weight: bold;
    font-size: 0.8vh;
    color: #fdc251;
  }

  :deep(.row-item .ceil):nth-child(6) {
    font-family: DIN;
    font-weight: bold;
    font-size: 0.8vh;
    color: #ed6464;
  }
}

@keyframes widthAnimation {
  from {
    width: 0%;
  }

  to {}
}

@keyframes toLeft {
  from {
    // left: -21.85%;
    left: 0%;
  }

  to {
    left: 0;
  }
}

@keyframes toRight {
  from {
    // right: -21.85%;
    right: 0;
  }

  to {
    right: 0;
  }
}

@keyframes toShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>
